<template>
	<div class="audiocontentpage">
		<van-cell>
			<template #title>
				<van-image round width="2rem" height="2rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
				<div style="font-size: 12px;margin-left:5px" @click="$router.push({name:'shopindex'})">{{shopname}}</div>
			</template>
			<template #right-icon>
				<div class="van-cell_righticon">
					<van-icon name="search" class="search-icon" style="font-size:18px;margin-right:15px;" @click="$router.push({name:'search'})"/>|&nbsp;<div
						style="font-size: 12px;" @click="$router.push({name:'my'})">个人中心</div>
				</div>
			</template>
		</van-cell>
		<div style="height: 100px;background: white;display: flex;flex-direction: column;">
			<div class="ml-10" style="font-size:16px;font-weight: bold;margin-top: 20px;">{{item.title}}</div>
			<div class="ml-10" style="font-size:10px;color:#aaa;margin-top:15px">{{item.create_time}} | {{item.view}}次学习
			</div>
		</div>
		<div style="height:5px;background:#eee" />
		<div>
			<van-tabs v-model="active">
				<van-tab title="学习内容">
					<div v-html="item.custom_desc"></div>
				</van-tab>
				<van-tab title="评论">
					<div class="mt-10 ml-10" style="width: 100vw;display: flex;" v-for="(item,index) in list"
						:key="index">
						<!-- <div>
                            <div><img style="width:30px; height:30px; border-radius:50% ; border: 1px solid red;" :src="item.img">
                                <span class="ml-10"  style="font-size:8px;color:#aaa">{{item.name}}</span>
                            </div>
                            <div>
                                <span style="font-size:10px;margin-left: 1rem;">{{item.text}}</span>
                            </div>
                        </div>
                        <div class="mt-10">
                            <span class="ml-10" style="font-size:8px;color:#aaa">{{item.time}}</span>
                            <a href=""  style="font-size:8px;color:#aaa;margin-left: 1rem;">回复</a>
                        </div> -->
						<div class="box_left">
							<img style="width:30px; height:30px; border-radius:50% ;" :src="item.img">
						</div>
						<div class="box_right">
							<span class="ml-10" style="font-size:8px;color:#aaa">{{item.name}}</span>
							<div>
								<span style="font-size:10px;margin-left: 0.6rem;">{{item.text}}</span>
							</div>
							<div class="mt-10">
								<span class="ml-10" style="font-size:8px;color:#aaa">{{item.time}}</span>
								<a @click="show=true" style="font-size:8px;color:#aaa;margin-left: 1rem;">回复</a>
							</div>
							<van-collapse v-model="activeName">
								<van-collapse-item title="展开回复" :name="index">
									<div class="mt-10 ml-10" style="width: 100vw;display: flex;"
										v-for="(item,index) in list" :key="index">
										<div class="box_left">
											<img style="width:30px; height:30px; border-radius:50% ;" :src="item.img">
										</div>
										<div class="box_right">
											<span class="ml-10" style="font-size:8px;color:#aaa">{{item.name}}</span>
											<div>
												<span style="font-size:10px;margin-left: 0.6rem;">{{item.text}}</span>
											</div>
											<div class="mt-10">
												<span class="ml-10"
													style="font-size:8px;color:#aaa">{{item.time}}</span>
												<a href="" style="font-size:8px;color:#aaa;margin-left: 1rem;">回复</a>
											</div>
										</div>
									</div>
								</van-collapse-item>
							</van-collapse>
						</div>
					</div>
				</van-tab>
				<van-tab title="课程评价"><xjevaluate :info_id="id" type="image_text"></xjevaluate></van-tab>
				<van-tab title="相关推荐"><xjtjcourse :category_id="category_id"></xjtjcourse></van-tab>
			</van-tabs>
		</div>
		<van-tabbar active-color="#000" inactive-color="#000">
			<van-tabbar-item icon="notes-o" @click="$refs.dirpopup.show=true;">课程目录</van-tabbar-item>
			<van-tabbar-item icon="gift-o" @click="topresented()">请好友看</van-tabbar-item>
			<van-tabbar-item icon="chat-o" @click="show=true">写评论</van-tabbar-item>
		</van-tabbar>
		<!-- 评论弹出层 -->
		<van-action-sheet v-model="show">
			<van-field v-model="message" rows="2" autosize type="textarea" maxlength="30" placeholder="请输入评论"
				show-word-limit>
				<template #button>
					<van-button type="primary" size="small" class="btn" @click="comment">发表</van-button>
				</template>
			</van-field>
		</van-action-sheet>
		<xjdirpopup ref="dirpopup"></xjdirpopup>
	</div>

</template>

<script>
import xjevaluate from '@/components/frontshop/xjevaluate.vue';
import xjtjcourse from '@/components/frontshop/xjtjcourse.vue';
import xjdirpopup from '@/components/frontshop/xjdirpopup.vue';
import showfileMixin from '@/mixin/showfrontossfile.js';
export default {
	components: {
        xjevaluate,
		xjtjcourse,
		xjdirpopup
    },
	data() {
		return {
			show: false,
			shopname: localStorage.getItem('shopname')?localStorage.getItem('shopname'):'', //店铺名
			active: 0, //默认详情
			item: '',
			id: '',//单个知识id
			message: "",
			list: [
				{ name: "橘子", img: "img", text: "123", time: "2022.10.10" },
				{ name: "苹果", img: "img", text: '456', time: "2022.1.1" }
			],
			activeName: ['1'],
			category_id:''
		}
	},
	methods: {
		async topresented(path) {
            const friendform={id : this.$route.query.id,columnid : this.$route.query.columnid}
            let res = await this.$frontaxios.post(this.$front.api_doShareInfoInviteFriend, friendform);
            console.log(res)
            navigator.clipboard
                .writeText(res.data.url)
                .then(() => {
                    this.$message.success('复制成功,去发送给好友吧');
                })
                .catch((err) => {
                    this.$message.error('复制失败');
                });
        },
		comment() {
			this.$notify({ type: 'success', message: '发表成功' })
			this.show = false
			console.log(this.message);
			let time = new Date()
			console.log(time);
			const obj = {
				name: this.shopname,
				img: "https://img01.yzcdn.cn/vant/cat.jpeg",
				text: this.message,
				time
			}
			this.list.push(obj)
			this.message = ""
		}
	},
	mixins: [showfileMixin],
	async mounted() {
		this.id = this.$route.query.id;
		let query = {
			id: this.id,
			columnid:this.$route.query.columnid
		};
		let res0 = await this.$frontaxios.post(this.$front.getOneKnowledge, query);
		console.log('test',res0)
		// if(res0.code==-2){
		// 	this.$dialog.alert({title:"温馨提示",message:"请购买后再来观看！"}).then(()=>{
		// 		this.$router.back();
		// 	})
		// 	return;
		// }
		// else if(res0.code==-5){
		// 	this.$dialog.alert({title:"温馨提示",message:"没有查询到你兑换了课程和可能使用期限已到或没到！"}).then(()=>{
		// 		this.$router.back();
		// 	})
		// 	return;
		// }else if(res0.code==-1){
        //     this.$dialog.alert({title:"温馨提示",message:"没有获取到数据，请稍后再试！"}).then(()=>{
		// 		// this.$router.back();
		// 	})
		// 	return;
		// }else if(res0.code==-3){
		// 	this.$dialog.alert({title:"温馨提示",message:"请购买后再来观看！"}).then(()=>{
		// 	this.$router.back();
		// 	})
		// }
		this.item = res0.data;
		this.category_id=res0.data.category_id;
	}
}
</script>

<style lang="scss" scoped>
.audiocontentpage {
	.van-cell__title {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.van-cell_righticon {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.fixaudiocontent {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		height: 50px;
		border-top: 1px solid #eee;
		line-height: 50px;
		display: flex;
		text-align: center;
		font-size: 12px;
	}
}

.btn {
	border-radius: 1rem;
	width: 3.5rem
}

.van-cell__title {
	font-size: 8px;
	color: #aaa;
}
</style>
